<template>
  <div class="main-block-1">
    <div class="title">情报采集量</div>
    <div class="round">
      <img src="./img/main-block-1-round1.png" class="round-item">
      <img src="./img/main-block-1-round2.png" class="round-item">
      <img src="./img/main-block-1-round3.png" class="round-item">
    </div>
    <div class="total">
      <div class="title">总量</div>
      <div class="num">{{total | number}}</div>
    </div>
    <div class="wavewrapper">
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
      <div class="wave"></div>
    </div>
    <div class="datawrapper">
      <div class="data">
        <div class="title">高危</div>
        <div class="num">{{d1 | number}}</div>
      </div>
      <div class="data">
        <div class="title">中危</div>
        <div class="num">{{d2 | number}}</div>
      </div>
      <div class="data">
        <div class="title">低危</div>
        <div class="num">{{d3 | number}}</div>
      </div>
    </div>
    <div class="batterywrapper">
      <div class="battery" v-for="item in battery"></div>
    </div>
    <img class="global-back" src="./img/main-block-1-global-back.png">
    <div class="earth-back"></div>
    <earth-small></earth-small>
    <img class="moon" src="./img/main-block-1-moon.png">
  </div>
</template>

<script>
import {randint} from 'utils/random'
import EarthSmall from 'components/Main/EarthSmall'

var out = {}
var count = {}
count.d1 = 0
count.d2 = 0
count.d3 = 0
count.battery = 0

out.d1 = 563
out.d2 = 12533
out.d3 = 725630
out.battery = 3



setInterval(()=>{
  count.d1++
  if(count.d1 == 50){
    count.d1 = 0
    out.d1 += 1
  }
  //更新中危
  count.d2++
  if(count.d2 == 20){
    count.d2 = 0
    out.d2 += 1
  }
  //更新低危
  count.d3++
  if(count.d3 == 1){
    count.d3 = 0
    out.d3 += 1
  }
  //更新充电条
  count.battery++
  if(count.battery == 8){
    count.battery = 0
    out.battery++
    if(out.battery == 4){
      out.battery = 0
    }
  }
}, 100)

export default {
  name: 'block1',
  components:{
    EarthSmall
  },
  data(){
    return out
  },
  
  computed:{
    total(){
      return this.d1 + this.d2 + this.d3
    }
  }
}
</script>

<style scoped>
.main-block-1{
  position: absolute;
  background-image: url(./img/main-block-1.png);
  background-size: 100% 100%;
  top: 6.48vh;
  left: 3.61vh;
  width: 51.11vh;
  height: 52.31vh;
  filter: drop-shadow(0 0 7px #0057b8);
}
.main-block-1>.title{
  position: absolute;
  color: #b8fdff;
  font-size: 2.4vh;
  left: 5.65vh;
  top: .9vh;
}
.round{
  width: 9.44vh;
  height: 9.44vh;
  position: absolute;
  bottom: -0.46vh;
  left: -1.39vh;
}
.round-item{
  position: absolute;
  width: 9.44vh;
  height: 9.44vh;
}
.round-item:nth-child(1){
  animation: reRotate 1s linear infinite;
}
.round-item:nth-child(2){
  animation: randomRotate3 1.8s linear infinite alternate
}
.round-item:nth-child(3){
  animation: randomRotate1 2.6s ease infinite alternate
}
.total{
  position: absolute;
  top: 6vh;
  left: 0;
  right: 0;
  text-align: center;
}
.total>.title{
  color : #10dbff;
  font-size: 2.4vh;
}
.total>.num{
  font-size: 3.84vh;
  color: #10dbff;
}
.datawrapper{
  position: absolute;
  top: 36.3vh;
  left: 0;
  right: 0;
}
.data{
  width: 28%;
  text-align: center;
  float: left;
}
.data>.title{
  font-size: 2.22vh;
}
.data>.num{
  font-size: 3.33vh;
}
.data:nth-child(1){
  color: #e32d03;
  margin-left: 5vh;
}
.data:nth-child(2){
  color: #ff9600;
}
.data:nth-child(3){
  color: #1fb3b5;
}
.batterywrapper{
  position: absolute;
  bottom: 1.21vh;
  left: 24.5vh;
}
.battery{
  width: 6.11vh;
  height: 1.76vh;
  background-color: #27a5c0;
  float: left;
  margin-right: 0.93vh;
  transform: skew(45deg);
}
.global-back{
  position: absolute;
  left: 0;
  top: 19.63vh;
  width: 100%;
}
.earth-small{
  position: absolute;
  left: 15.8vh;
  top: 13vh;
}
.earth-back{
  position: absolute;
  left: 17.2vh;
  top: 14.3vh;
  width: 17vh;
  height: 17vh;
  border: 1px solid #19c7ec;
  border-radius: 50%;
  box-shadow: inset 0 0 12vh #19c7ec;
}
.wavewrapper{
  position: absolute;
  width: 51.11vh;
  height: 51.11vh;
  top: 3vh;
  transform: perspective(1000vh) rotateX(60deg);
}
.wave{
  box-sizing: border-box;
  position: absolute;
  width: 51.11vh;
  height: 51.11vh;
  border: 0.3vh solid #19c7ec;
  border-radius: 50%;
  box-shadow: inset 0 0 2vh #108da7, 0 0 1.5vh #108da7;
  animation: roundWave 6s linear infinite;
}
.wave:nth-child(2){
  animation-delay: -4.5s
}
.wave:nth-child(3){
  animation-delay: -3s
}
.wave:nth-child(4){
  animation-delay: -1.5s
}
.moon{
  animation: reRotate 6s linear infinite;
  width: 18.8vh;
  height: 18.8vh;
  position: absolute;
  top: 13.5vh;
  left: 16.4vh
}
</style>
